<template>
	<view>
		<view class="gudinglan">
			<view class="tongji">
				<text style="color: #94bcff;font-size: 12px;">
					共有 {{ cardlist.length }} 家工厂，</text>
					<text style="color: #94bcff;font-size: 12px;">
						当前使用:{{ buttonText }}</text>
				<button class="my-button" @click="togglePrice()">切换价格</button>
				<view class="example-body">
					<uni-fav :content-text="contentTextt" @click="dialogToggle('warn')" fgColor="#007aff"></uni-fav>
				</view>
			</view>
		</view>

		<view class="container">
			<uni-card v-for="(card, index) in cardlist" :key="index" :title="card.factory" extra="未结算">
				<text selectable="ture" v-if="showOriginalPrice">{{ card.textline }}</text>
				<text selectable="ture" v-else>{{ card.text }}</text>
				<view class="card-actions">
					<view class="card-actions-item" @click="actions1Click(showOriginalPrice? card.textline : card.text)">
						<uni-icons type="paperplane" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">复制</text>
					</view>
					<view class="card-actions-item" @click="actions2Click(card.factory)">
						<uni-icons type="more" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">详情</text>
					</view>
					<view class="card-actions-item" @click="actions5Click(card.factory,showOriginalPrice ? card.textline : card.text)">
						<uni-icons type="checkmarkempty" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">结算</text>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="800"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '',
				value: '',
				contentTextt: {
					contentDefault: '历史',
					contentFav: '历史'
				},
				title: '',
				cardlist: '',
				showOriginalPrice: true, // 控制是否显示原价
			}
		},
		computed: {
			buttonText() {
				return this.showOriginalPrice ? '原价' : '工价';
			},
			contentText() {
				return this.showOriginalPrice ? '原价内容' : '员工价格内容';
			}
		},
		onShow() {
			console.log("admin加载完成")
			this.api.SeleGongChangZong().then(res => {
				console.log(res)
				this.cardlist = res.data
				this.showjia = res.data.text
				console.log(this.showjia)
				if (res.data != '') {
					this.msgType = 'success'
					this.messageText = `加载完成啦`
					this.$refs.message.open()
				} else {
					this.msgType = 'error'
					this.messageText = `没有记录哦`
					this.$refs.message.open()
				}
			})
		},
		methods: {
			actions2Click(facotry) {
				console.log("详情" + facotry);
				// 跳转到详情页面 将参数存到缓存中
				uni.setStorageSync('detailsfacotry', facotry);
				uni.setStorageSync('details', 'openadmin');
				uni.navigateTo({
					url: '/pages/details/details'
				});
			
			
			},
			togglePrice() {
				this.showOriginalPrice = !this.showOriginalPrice;
				const toastText = this.showOriginalPrice ? '已切换为原价' : '已切换为员工价格';
				uni.showToast({
					title: toastText,
					icon: 'none'
				});
			},
			dialogToggle(type) {
				uni.setStorageSync('record', 'openadmin');
				uni.navigateTo({
					url: '/pages/record/record'
				});
			},
			actions1Click(title) {
				// console.log("复制" + title);
				uni.setClipboardData({
					data: title,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			actions5Click(factory,text) {
				console.log("结算" + factory);
				this.api.SetStateline({
					factory: factory,
					text: text
				}).then(res => {
					console.log(res)
					if (res.status >= 1) {
						this.msgType = 'success'
						this.messageText = factory + ` 结算成功啦`
						this.$refs.message.open()
						// 从cardlist数组中删除指定的card
						for (let i = 0; i < this.cardlist.length; i++) {
							if (this.cardlist[i].factory === factory) {
								this.cardlist.splice(i, 1);
								break;
							}
						}
					} else {
						this.msgType = 'error'
						this.messageText = factory + ` 结算失败啦`
						this.$refs.message.open()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-button {
		background-color: #8cde9b;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 1px 10px;
		/* 调整内边距使按钮更小 */
		font-size: 10px;
		/* 调整字体大小使按钮更小 */
	}

	.gudinglan {
		width: 100%;
		position: fixed;
		top: 0px;
		z-index: 1;
		background-color: #ffffff;
		height: 40px;
	}

	.tongji {
		display: flex;
		justify-content: space-between;
		padding: 0 5%;
		padding-top: 2%;
	}

	//卡片固定样式
	.container {
		overflow: auto;
		// /* 控制内容溢出时显示滚动条 */
		margin-top: 40px;
		/* 调整合适的距离 */
		padding-bottom: 30px;

		/* 添加底部间距，防止内容紧贴底部 */
		.card-actions {
			display: flex;
			justify-content: space-between;
			padding: 0 2%;
		}

		.card-actions-item {
			display: flex;
			align-items: center;
			padding-top: 10px;

			.card-actions-item-text {
				padding-left: 5px;
			}
		}
	}
</style>